<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="../style.css">
	<script src="../vue.js"></script>
</head>
<body>
	<p class="title">1.声明式渲染</p>
	<div id="app">{{message}}</div>
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				message:'Hello Vue!'
			}
		})
	</script>


	<p class="subtitle">1.1 v-blind绑定输入熟悉</p>
	<div id="app2">
		<span v-bind:title="message">
			Hover your mouse over me for a few seconds to see my dynamically bound title!
		</span>
	</div>
	<script>
		var app2 = new Vue({
			el:'#app2',
			data:{
				message:'Now time is' + new Date(),
			}
		})
	</script>

	<p class="title">2.条件与循环</p>
	<p id="subtitle">2.1 v-if条件</p>
	<div id="app3">
		<p v-if='seen'>Now you can see me</p>
	</div>
	<script>
		var app3=new Vue({
			el:'#app3',
			data:{
				seen:true
			}
		})
	</script>

	<p id="subtitle">2.2 循环</p>
	<div id="app4">
		<ol>
			<li v-for="todo in todos">
				{{todo.text}}
			</li>
		</ol>
	</div>
	<script>
		var a=[
			{text:'1'},
			{text:'3'},
			{text:'2'},
			{text:'4'},

		]
		var app4=new Vue({
			el:'#app4',
			data:{
				// todos:[
				// 	{text:'Learning Javascript'},
				// 	{text:'Learning Vue'},
				// 	{text:'Build something awesome'},
				// ]
				todos:a
			}
		})
	</script>

	<p class="title">3.处理用户输入</p>
	<p class="subtitle">3.1用户方法</p>
	<div id="app5">
		<p>{{message}}</p>
		<button v-on:click="reverseMessage">Reverse Message</button>
	</div>

	<script>
		var app5 = new Vue({
			el:'#app5',
			data:{
				message:'Hello Vue.js'
			},
			methods:{
				reverseMessage:function (argument) {
					this.message=this.message.split('').reverse().join('');
				}
			}
		})
	</script>

	<p class="subtitle">3.2用户输入</p>
	<div id="app6">
		<p>{{message}}</p>
		<input type="text" v-model="message">
	</div>
	<script>
		var app6 = new Vue({
			el:'#app6',
			data:{
				message:'Hello Vue.js'
			}
		})
	</script>
</body>
</html>